<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">

    </div>
</body>

</html>
<script>





    const Count = Vue.extend({
        data() {
            return { count: 1 }
        },
        template: `
        <div>
                  <button @click="count++">加一</button>
                   <span>{{count}}</span>
                   <button @click="count--">减一</button>    
            </div>
        `
    })


    const Big = Vue.extend({
            data(){
                return {f:16};
            },
            //解构编辑器
            template:`
               <div>
                  <p :style="{fontSize:f+'px'}" @click="f+=10">撒浪嘿呦 </p> 
               </div>
            `
       })


   //定义组件App
   const App = Vue.extend({
           data(){
               return {
                    info:'我是App组件'
               }
           },
           //当前组件的模板编译器,一个组件只能有一个根标签
           template:`
              <div>
                <div>{{info}}</div>
                <div>2</div>
                <Count></Count>
                <Big></Big>
              </div>
           `,
           components:{
               Count,
               Big
           }
      });



    //关联VM
    const VM = new Vue({
        el: '#app',
        components:{
            App,
        },
        template:`
        <div>
            <App></App>
            </div>
        `
    })
</script>